{{ header }}{{ column_left }}
<div id="content">
  <div class="page-header">
    <div class="container-fluid">
      <div class="float-right"><a href="{{ add }}" data-toggle="tooltip" title="{{ button_add }}" class="btn btn-primary"><i class="fas fa-plus"></i></a>
        <button type="button" data-toggle="tooltip" title="{{ button_delete }}" class="btn btn-danger" onclick="confirm('{{ text_confirm }}') ? $('#form-zone').submit() : false;"><i class="fas fa-trash-alt"></i></button>
      </div>
      <h1>{{ heading_title }}</h1>
      <ol class="breadcrumb">
        {% for breadcrumb in breadcrumbs %}
          <li class="breadcrumb-item"><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
        {% endfor %}
      </ol>
	  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#hint">{{ text_hint }}</button>
    </div>
  </div>
  <div class="container-fluid">
    {% if error_warning %}
      <div class="alert alert-danger alert-dismissible"><i class="fas fa-exclamation-circle"></i> {{ error_warning }}
        <button type="button" class="close" data-dismiss="alert">&times;</button>
      </div>
    {% endif %}
    {% if success %}
      <div class="alert alert-success alert-dismissible"><i class="fas fa-check-circle"></i> {{ success }}
        <button type="button" class="close" data-dismiss="alert">&times;</button>
      </div>
    {% endif %}
    <div class="card">
      <div class="card-header"><i class="fas fa-list"></i> {{ text_list }} 
	  {% if parent_zones %}
			
			  <span class="belong-zone">{{ text_parent_zones }}</span>
			  {% for parent_zone in parent_zones %}
			  <a class="btn btn-default" href="{{ parent_zone.href}}">{{ parent_zone.name }}</a>
			  {% endfor %}
			  <a class="btn btn-info" href="{{ back_top }}">{{ button_back_top }}</a>
		  
	  {% endif %}
	  </div>
	  
      <div class="card-body">
        <form action="{{ delete }}" method="post" enctype="multipart/form-data" id="form-zone">
				  <div class="table-responsive">
					<table class="table table-bordered table-hover">
					  <thead>
						<tr>
						  <td style="width: 1px;" class="text-center"><input type="checkbox" onclick="$('input[name*=\'selected\']').trigger('click');"/></td>
						  <td class="text-left">{% if sort == 'name' %}
							  <a href="{{ sort_name }}" class="{{ order|lower }}">{{ column_name }}</a>
							{% else %}
							  <a href="{{ sort_name }}">{{ column_name }}</a>
							{% endif %}</td>
						  <td class="text-left">{{ column_level }}</td>
						  <td class="text-left">{{ column_parent_id }}</td>
						  <td class="text-right">{{ column_action }}</td>
						</tr>
					  </thead>
					  <tbody>
						{% if zones %}
						  {% for zone in zones %}
							<tr>
							  <td class="text-center">{% if zone.zone_id in selected %}
								  <input type="checkbox" name="selected[]" value="{{ zone.zone_id }}" checked="checked"/>
								{% else %}
								  <input type="checkbox" name="selected[]" value="{{ zone.zone_id }}"/>
								{% endif %}</td>
							  <td class="text-left"><a href="{{ zone.subzone }}">{{ zone.name }}</a></td>
							  <td class="text-left">{{ zone.level }}</td>
							  <td class="text-left">{{ zone.parent_id }}</td>
							  <td class="text-right">
							  	<div class="btn-group">
								  <a href="{{ zone.edit }}" data-toggle="tooltip" title="{{ button_edit }}" class="btn btn-primary"><i class="fas fa-pencil-alt"> {{ button_edit }}</i></a>
								  <button type="button" data-toggle="dropdown" class="btn btn-info dropdown-toggle dropdown-toggle-split">设置</button>
								  <div class="dropdown-menu dropdown-menu-right">
									
									
									<a href="{{ zone.add_subzone }}" class="dropdown-item">新增下级</a>
									<a href="{{ zone.subzone }}" class="dropdown-item">查看下级</a>
									
									
								</div>
							  
							  </td>
							</tr>
						  {% endfor %}
						{% else %}
						  <tr>
							<td class="text-center" colspan="5">{{ text_no_results }}</td>
						  </tr>
						{% endif %}
					  </tbody>
					</table>
				  </div>
				</form>
        <div class="row">
          <div class="col-sm-6 text-left">{{ pagination }}</div>
          <div class="col-sm-6 text-right">{{ results }}</div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="hint" tabindex="-1" role="dialog" aria-labelledby="hintlabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="hintlabel">{{ text_hint }}</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        {{ hint_zone }}
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ text_close }}</button>
      </div>
    </div>
  </div>
</div>

{{ footer }}